/**
 * 技术创新点组件
 * 展示产品的核心技术创新和竞争优势
 */

import { motion } from "framer-motion";

interface InnovationSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function InnovationSection({ sectionRef }: InnovationSectionProps) {
    return (
        <section
            ref={sectionRef}
            className="py-20 bg-gradient-to-br from-indigo-50 to-purple-50">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">技术创新点</h2>
                </motion.div>
                
                <div className="grid md:grid-cols-2 gap-12">
                    {/* 左侧创新点列表 */}
                    <div className="space-y-10">
                        {/* 微调小模型技术 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: -30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.5
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                            <div className="flex items-start">
                                <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                    <i className="fa-solid fa-microchip text-indigo-600 text-xl"></i>
                                </div>
                                <div>
                                    <h3 className="text-xl font-bold text-indigo-800 mb-3">微调小模型技术</h3>
                                    <p className="text-gray-600">
                                        通过SFT全参数微调和LoRA低秩适配技术，在不损失准确度的情况下，将处理速度提升至350token/s，比大模型快10倍以上。
                                    </p>
                                </div>
                            </div>
                        </motion.div>
                        
                        {/* 多语言解析引擎 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: -30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.5,
                                delay: 0.1
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                            <div className="flex items-start">
                                <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                    <i className="fa-solid fa-language text-indigo-600 text-xl"></i>
                                </div>
                                <div>
                                    <h3 className="text-xl font-bold text-indigo-800 mb-3">多语言解析引擎</h3>
                                    <p className="text-gray-600">
                                        突破传统解析工具的语言限制，支持中英日韩等多国语言简历，中文解析准确率96%，英文解析准确率89%，远超传统方案。
                                    </p>
                                </div>
                            </div>
                        </motion.div>
                        
                        {/* 智能文档处理流水线 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: -30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.5,
                                delay: 0.2
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                            <div className="flex items-start">
                                <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                    <i className="fa-solid fa-brain text-indigo-600 text-xl"></i>
                                </div>
                                <div>
                                    <h3 className="text-xl font-bold text-indigo-800 mb-3">智能文档处理流水线</h3>
                                    <p className="text-gray-600">
                                        创新的并行处理架构，将OCR和内容生成任务分解为多个并行子任务，实现单份简历解析时间≤10秒，比传统串行处理提速3倍。
                                    </p>
                                </div>
                            </div>
                        </motion.div>
                        
                        {/* 轻量级部署方案 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: -30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.5,
                                delay: 0.3
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                            <div className="flex items-start">
                                <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                    <i className="fa-solid fa-cloud text-indigo-600 text-xl"></i>
                                </div>
                                <div>
                                    <h3 className="text-xl font-bold text-indigo-800 mb-3">轻量级部署方案</h3>
                                    <p className="text-gray-600">
                                        基于WHALE平台的轻量级部署方案，单实例支持23 QPM，运行成本比大模型方案降低70%，实现高性能与低成本的完美平衡。
                                    </p>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                    
                    {/* 右侧竞争优势 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white rounded-2xl shadow-xl p-8">
                        <h3 className="text-2xl font-bold text-purple-800 mb-8">竞争优势</h3>
                        
                        {/* 性能对比表格 */}
                        <div className="overflow-x-auto mb-10">
                            <table className="w-full text-sm">
                                <thead>
                                    <tr className="bg-purple-50">
                                        <th className="p-4 text-left font-semibold text-gray-800">指标</th>
                                        <th className="p-4 text-center font-semibold text-gray-800">传统解析</th>
                                        <th className="p-4 text-center font-semibold text-gray-800">大模型方案</th>
                                        <th className="p-4 text-center font-semibold text-purple-800">我们的方案</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                        <td className="p-4 font-medium text-gray-800">中文准确率</td>
                                        <td className="p-4 text-center text-gray-600">75.13%</td>
                                        <td className="p-4 text-center text-gray-600">98%</td>
                                        <td className="p-4 text-center font-bold text-purple-700">96%</td>
                                    </tr>
                                    <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                        <td className="p-4 font-medium text-gray-800">英文准确率</td>
                                        <td className="p-4 text-center text-gray-600">61.84%</td>
                                        <td className="p-4 text-center text-gray-600">90%</td>
                                        <td className="p-4 text-center font-bold text-purple-700">89%</td>
                                    </tr>
                                    <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                        <td className="p-4 font-medium text-gray-800">处理速度</td>
                                        <td className="p-4 text-center text-gray-600">30秒/份</td>
                                        <td className="p-4 text-center text-gray-600">60秒/份</td>
                                        <td className="p-4 text-center font-bold text-purple-700">10秒/份</td>
                                    </tr>
                                    <tr className="hover:bg-gray-50 transition-colors">
                                        <td className="p-4 font-medium text-gray-800">运行成本</td>
                                        <td className="p-4 text-center text-gray-600">高</td>
                                        <td className="p-4 text-center text-gray-600">极高</td>
                                        <td className="p-4 text-center font-bold text-purple-700">低</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        {/* 核心竞争优势列表 */}
                        <div>
                            <h4 className="text-xl font-semibold text-purple-700 mb-5">核心竞争优势</h4>
                            <ul className="space-y-4">
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                    <div>
                                        <p className="font-medium text-gray-800">精准度与大模型相当，成本降低70%</p>
                                        <p className="text-sm text-gray-600 mt-1">微调小模型实现接近大模型的准确率，同时大幅降低计算资源消耗</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                    <div>
                                        <p className="font-medium text-gray-800">多语言支持，解决国际化招聘痛点</p>
                                        <p className="text-sm text-gray-600 mt-1">支持中英日韩等多国语言简历解析，满足全球化企业需求</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                    <div>
                                        <p className="font-medium text-gray-800">高效处理复杂排版与扫描件</p>
                                        <p className="text-sm text-gray-600 mt-1">智能文档处理流水线能有效处理复杂排版和扫描件，解析准确率高</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                    <div>
                                        <p className="font-medium text-gray-800">可持续迭代的技术架构</p>
                                        <p className="text-sm text-gray-600 mt-1">模块化设计支持持续优化和功能扩展，适应未来招聘场景变化</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}